<template>
  <div class="warning">
    <el-tooltip effect="dark" placement="bottom" v-for="value in Data || []" :key="value.id">
      <el-tag round :style="switchColor(value?.severityColor)"> {{ value?.typeName }} 预警</el-tag>
      <template #content>
        <p>{{ value?.title }}</p>
        <p style="max-width: 25rem">{{ value?.text }}</p>
      </template>
    </el-tooltip>
  </div>
</template>
<script setup lang="ts">
import { useWeatherStore } from '@/stores/weather'
import { computed } from 'vue'
const weatherStore = useWeatherStore()
const Data = computed(() => {
  return weatherStore.currentLocation?.warningData.warning
})
function switchColor(item) {
  switch (item) {
    case 'Yellow':
      return `background-color: #e6a23c; color: #fff;`
    case 'Blue':
      return `background-color: #409eff; color: #fff;`
    case 'Orange':
      return `background-color: #e6a23c; color: #fff;`
    case 'Red':
      return `background-color: #FF0000; color: #fff;`
    default:
      return `background-color: #3967E4; color: #fff;`
  }
}
</script>
<style scoped lang="scss">
@use '@/assets/customVar.scss' as *;
.warning {
  display: flex;
  margin-left: 0.625rem;
  .el-tag {
    height: 30px;
  }
}
</style>
